<template>
  <div class="category-nav">
    <div
      class="tt-item"
      v-for="(item, index) in cateList"
      :key="index"
      @click="handel(item.id)"
    >
      <div class="img">
        <img :src="$filters.formatImgSize(item.picIPadUrl, 40)" alt="404" />
      </div>
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from 'vue'

const props = withDefaults(
  defineProps<{
    cateList: any
  }>(),
  {
    cateList: []
  }
)
// 点击跳转到对应分类
const handel = (id: number) => {
  console.log(id)
}
</script>

<style scoped lang="less">
.category-nav {
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;

  .tt-item {
    width: 18%;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 0, 0, 0.7);
    margin: 0 12px;
    padding: 10px 0;

    .img {
      img {
        width: 35px;
        height: 35px;
      }
    }
  }

  .tt-item:hover {
    background: #e8e8e8;
    color: red;
  }
}
</style>
